<template>
<div id="out17">
    <div class="back"></div>
    <a href="#/MyDingdanXq">
      <div class="shoppp">
      	<img src="../assets/img/shouye/2zeidianji/huihuxisihuafenmi.png" alt=""/>
      	<img src="../assets/img/shouye/2zeidianji/huihuxisihuafenmi.png" alt=""/>
      	<img src="../assets/img/shouye/2zeidianji/huihuxisihuafenmi.png" alt=""/>
      	<img src="../assets/img/shouye/2zeidianji/huihuxisihuafenmi.png" alt=""/>
      </div>
       </a>
      <p class="bottom">实付：<span class="price">￥166.06</span><span class="btn">发表心情</span></p>
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
				$("#out14 .dingdan span").text("交易完成");
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
#out17{
		height: 100vh;
		background: #f2f2f2;
	}
	#out17 a{
		text-decoration: none;
	}
	#out17 .shoppp{
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 20rem;
		background: #FFFFFF;
	}
	#out17 .shoppp>img{
		width: 8.6rem;
		height: 10rem;
	}
	#out17 .shoppp>div{
		font-size: 2.4rem;
		color: #666666;
		margin-left: 9rem;
		padding-right: 16rem;
	}
	#out17 .shoppp>div>.title{
		font-size: 2.8rem;
		margin-bottom: 3rem;
	}
	#out17 .shoppp>div>.price{
		margin-top: 4rem;
		color: #FF0000;
	}
	#out17 .shoppp>div>.price>span{
		color: #808080;
		padding-left: 4rem;
	}
	#out17>.bottom{
		font-size: 2.8rem;
		background: #FFFFFF;
		padding: 2rem;
	}
	#out17>.bottom>.price{
		font-size: 3rem;
		color: #FF0000;
	}
	#out17>.bottom>.daoJis{
		padding-left: 10rem;
		font-size: 2.4rem;
	}
	#out17>.bottom>.btn{
		float: right;
		width: 12rem;
		height: 4rem;
		background-color: #e53e42;
		color: #ffffff;
		border-radius: 2rem;
		text-align: center;
		line-height: 4rem;
		transform: translateY(-0.5rem);
	}
</style>